<template>
	<div :class="classes.homeView">
		<Header @handleViewChange="handleViewChange" :isViewBtn="true" @handleDownload="handleDownload" :ocrData="ocrData" :storageId="storageId" :editorRef="previewRefs" />
		<div class="blank_space">
			<uploadOrc @uploadSuccess=uploadSuccess />
			<Preview ref="previewRefs" />
		</div>
		<!-- <Preview /> -->
	</div>
</template>

<script setup lang="ts">
// import { insertPageDividers, removePageDividers } from "@/utils/paging"
import Preview from "./components/editor/Preview.vue"
import classes from "./index.module.less"
import Header from "./components/Header/index.vue"
import uploadOrc from "./components/uploadOrc.vue"
const handleViewChange = (val: string) => {
	console.log("val", val)
	/**
	 * 2 - 分页
	 * 1 - 连页
	 */
	if (val === "2") {
		// insertPageDividers()
	} else {
		// removePageDividers()
	}
}
const previewRefs = ref<any>();
const ocrData = ref<any>();
const storageId = ref<any>();
// 更新ocr数据
const uploadSuccess = (data: any,fileId:any) => {
	storageId.value = fileId;
	ocrData.value = data;
	previewRefs.value.upDataOcr(data);
}
// 下载
const handleDownload = () =>{
	previewRefs.value.downloadFile()
}
onMounted(()=>{
	const body = document.body;
	body.style.backgroundColor = 'rgb(234, 235, 235)';
})
onUnmounted(()=>{
	const body = document.body;
	body.style.backgroundColor = '#fff';
})
</script>

<style lang="less" scoped>
.arco-timeline-item {
	min-height: 42px !important;
}
:deep(.arco-timeline-item-dot-line) {
	border-left-width: 2px;
}
.blank_space{
	margin-top: 63px;
	height: calc(100vh - 80px);
	overflow: hidden;
	display: flex;
	.arco_row_arco{
		width: 50%;
	}
}
</style>

